var grid;
var isGridInitil = false;

$(function () {
		myLayout = $('body').layout({
		//	enable showOverflow on west-pane so CSS popups will overlap north pane
		//	north__showOverflowOnHover: true
		resizable:					true	// when open, pane can be resized 
		,	slidable:				true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
		//	some resizing/toggling settings
		,   north__size:			40
		,	north__spacing_open:	0
		,   north__resizable:		false
		,   north__closable:		false
		,	north__slidable:		false	// OVERRIDE the pane-default of 'slidable=true'
		,	spacing_open:			0
		,	west__size:				368
		,   north__resizable:		false
		,   north__closable:		false
		,	north__slidable:		false	// OVERRIDE the pane-default of 'slidable=true'
		,	center__minWidth:		500
		,   center__minHeight:		200
		,   south__size:			128
		,	south__resizable:		true	// OVERRIDE the pane-default of 'resizable=true'
		,	south__spacing_open:	2		// no resizer-bar when open (zero height)
		,	south__spacing_closed:	4		// big resizer-bar when open (zero height)
	
		,	useStateCookie:			true
		});
		
		myLayout.allowOverflow($('.dropdown-menu'));
		
		// tab initial
/*		$( "#tab1" ).tabs();
		$( "#tab2" ).tabs();
		$( "#tab1" ).css("height","98%");*/

		//table initial
		grid = $("#gene-table").jqGrid({
			datatype: "local",
			height : 180,
			colNames:['Name','Heigth', 'X Width', 'X Position','Y Width','Y Position','Gene Set'],
			colModel : [
                        {name: 'Name', index : 'name', width : 150,sorttype:"string", align: 'center'},
                        {name: 'Height', index : 'height', width : 150, sorttype:"float", align: 'center'},
                        {name: 'X Width', index : 'xwidth', width : 150, sorttype:"float", align: 'center'},
                        {name: 'X Position', index : 'x_pos', width : 150, sorttype:"float", align: 'center'},
                        {name: 'Y Width', index : 'y_width', width : 150, sorttype:"float", align: 'center'},
                        {name: 'Y Position', index : 'y_pos', width : 150, sorttype:"float", align: 'center'},
                        {name: 'Gene Set', index : 'g_set', width : 80, sorttype:"int", align: 'center'}
                       ],
              autowidth: true,
              multiselect: true,
              onSelectRow: table_select_chg,
              onSelectAll: table_select_all_chg
		});
		// filling data
		for (var i =0; i<mydata.length ;i++){
			grid.addRowData(i,mydata[i]);
			grid.setSelection(i);
		}
		isGridInitil = true;
		
		chart_nl = new Network_Layout_chart("canvas_nl");
		drawNetworkLayout();
		canvas_nl_selection = createSelection("canvas_nl_mask");
		
		chart_1D = new D1_chart("canvas_1D");
		draw1DLayout();
		canvas_1D_selection = createSelection("canvas_1D_mask");
});

//event handle
function table_select_chg(id) {
	if (isGridInitil == true) { // grid initialized
		clearNetworkLayout();	
		drawNetworkLayout();
		
		clear1D();
		draw1DLayout();
	}
}

// event handle
function table_select_all_chg(p){
	if(p.length == 0){
		// exception
	}else{
		clearNetworkLayout();
		drawNetworkLayout();
		
		clear1D();
		draw1DLayout();
	}
	
}